<template>
  <view class="index-content" v-if="loadEnd">
    <!-- 内容 -->
    <view class="detail-content">
      <!-- 帖子内容 -->
      <detail
        :show-data="userInfo"
        @likePosts="likePosts"
        @collections="collections"
      ></detail>
      <!-- 分割线 -->
      <view class="divider-line"></view>
      <!-- 评论内容 -->
      <comment :show-data="postsDetails"></comment>
    </view>
    <!-- 发表评论 -->
    <view class="bottom" v-if="hide != 'true'">
      <view class="discuss">
        <input
          type="text"
          placeholder="输入你想说的话..."
          v-model="comments"
          @confirm="setComment"
          placeholder-style="font-size:28rpx;color:#999;"
        />
        <button @click="setComment">发送</button>
      </view>
    </view>
  </view>
</template>

<script>
import detail from "@/pages/Component/forum/component/main-list/detail.vue";
import comment from "@/pages/Component/forum/component/main-list/comment.vue";
import ikz from "@/pages/Common/tools.js";
export default {
  components: {
    detail,
    comment,
  },
  data() {
    return {
      loadEnd: false,
      userInfo: {}, //用户信息
      postsDetails: [], //评论信息
      fatherid: 0,
      comments: "",
      hide: false,
    };
  },
  onLoad(options) {
    this.fatherid = options.id;
    this.hide = options.hide;
    this.getDetail();
    this.getPostsDetail();
  },
  methods: {
    // 图片预览
    previewImage(images, currentIndex) {
      wx.previewImage({
        current: images[currentIndex], // 当前显示图片的链接
        urls: images, // 需要预览的图片链接列表
      });
    },
    // 获取帖子详情
    getDetail() {
      uni.showLoading({ mask: true });
      let path = "/xyb/posts/posts/detail";
      let data = {
        id: this.fatherid,
        token: uni.getStorageSync("local_user_session"),
      };
      ikz.request(path, data, (res) => {
        if (res.statusCode == 200) {
          this.userInfo = res.data.data;
        }
        this.loadEnd = true;
        uni.hideLoading();
        uni.stopPullDownRefresh();
      });
    },
    // 获取帖子评论详情
    getPostsDetail() {
      let path = "/xyb/posts/posts/posts_details";
      let data = {
        id: this.fatherid,
      };
      ikz.request(path, data, (res) => {
        if (res.statusCode == 200) {
          this.postsDetails = res.data.data;
        }
        this.loadEnd = true;
        uni.hideLoading();
        uni.stopPullDownRefresh();
      });
    },

    // 发表评论
    setComment() {
      let path = "/xyb/posts/posts/comment";
      let data = {
        posts_id: this.fatherid,
        token: uni.getStorageSync("local_user_session"),
        content: this.comments,
        agent_id: uni.getStorageSync("default_agent").id || "",
      };
      ikz.request(path, data, (res) => {
        if (res.statusCode == 200) {
          this.getPostsDetail();
          this.getDetail();
          this.comments = "";
        }
      });
    },
    // 点赞或取消点赞帖子
    likePosts(id, status) {
      let path = "";
      if (status == 0) {
        path = "/xyb/posts/posts/give";
      } else {
        path = "/xyb/posts/posts/give_del";
      }
      let data = {
        token: uni.getStorageSync("local_user_session"),
        posts_id: id,
      };
      ikz.requestPost(path, data, (res) => {
        if (res.statusCode == 200) {
          let title = "";
          if (status == 0) {
            title = "点赞成功";
            this.userInfo.give_status = 1;
            this.userInfo.give++;
          } else {
            title = "取消点赞";
            this.userInfo.give_status = 0;
            this.userInfo.give--;
          }
          uni.showToast({
            title,
            icon: "none",
          });
          let pages = getCurrentPages(); //获取所有页面栈实例列表
          let prevPage = pages[pages.length - 2]; //上一页页面实例
          if (prevPage.$vm.postsList) {
            prevPage.$vm.postsList.forEach((el) => {
              if (el.id == this.fatherid) {
                if (el.give_status == 0) {
                  el.give_status = 1;
                  el.give++;
                } else {
                  el.give_status = 0;
                  el.give--;
                }
              }
            });
          }
          if (prevPage.$vm.postList) {
            prevPage.$vm.postList.forEach((el) => {
              if (el.id == this.fatherid) {
                if (el.give_status == 0) {
                  el.give_status = 1;
                  el.give++;
                } else {
                  el.give_status = 0;
                  el.give--;
                }
              }
            });
          }
          if (prevPage.$vm.dataList) {
            prevPage.$vm.dataList.forEach((el) => {
              if (el.id == this.fatherid) {
                if (el.give_status == 0) {
                  el.give_status = 1;
                  el.give++;
                } else {
                  el.give_status = 0;
                  el.give--;
                }
              }
            });
          }
        }
      });
    },
    // 收藏或取消收藏帖子
    collections(id, status) {
      let path = "";
      if (status == 0) {
        path = "/xyb/posts/posts/collection";
      } else {
        path = "/xyb/posts/posts/collection_del";
      }
      let data = {
        token: uni.getStorageSync("local_user_session"),
        posts_id: id,
      };
      ikz.requestPost(path, data, (res) => {
        if (res.statusCode == 200) {
          let title = "";
          if (status == 0) {
            title = "收藏成功";
            this.userInfo.collection_status = 1;
            this.userInfo.collection++;
          } else {
            title = "取消收藏";
            this.userInfo.collection_status = 0;
            this.userInfo.collection--;
          }
          console.log("值", this.userInfo);
          uni.showToast({
            title,
            icon: "none",
          });
          let pages = getCurrentPages(); //获取所有页面栈实例列表
          let prevPage = pages[pages.length - 2]; //上一页页面实例
          if (prevPage.$vm.dataList) {
            prevPage.$vm.dataList.forEach((el) => {
              if (el.id == this.fatherid) {
                if (el.collection_status == 0) {
                  el.collection_status = 1;
                  el.collection++;
                } else {
                  el.collection_status = 0;
                  el.collection--;
                }
              }
            });
          }
          if (prevPage.$vm.postsList) {
            prevPage.$vm.postsList.forEach((el) => {
              if (el.id == this.fatherid) {
                if (el.collection_status == 0) {
                  el.collection_status = 1;
                  el.collection++;
                } else {
                  el.collection_status = 0;
                  el.collection--;
                }
              }
            });
          }
          if (prevPage.$vm.postList) {
            prevPage.$vm.postList.forEach((el) => {
              if (el.id == this.fatherid) {
                if (el.collection_status == 0) {
                  el.collection_status = 1;
                  el.collection++;
                } else {
                  el.collection_status = 0;
                  el.collection--;
                }
              }
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss">
/* 颜色变量 */
$primary-color: #ff5f15;
$secondary-color: #f8f9ff;
$accent-color: #6c8aff;
$text-color: #333;
$light-text: #666;
$border-radius: 24rpx;
$shadow: 0 8rpx 30rpx rgba(74, 108, 247, 0.1);

page {
  background-color: $secondary-color;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}

.index-content {
  padding: 0;
  
  .detail-content {
    padding: 0 30rpx 120rpx;
    
    .divider-line {
      height: 20rpx;
      margin: 0 -30rpx;
      background: $secondary-color;
    }
  }
  
  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx 30rpx;
    background: white;
    box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.05);
    z-index: 999;
    
    .discuss {
      display: flex;
      align-items: center;
      height: 80rpx;
      background: #f5f5f5;
      border-radius: 40rpx;
      padding: 0 20rpx;
      
      input {
        flex: 1;
        height: 100%;
        font-size: 28rpx;
        color: $text-color;
      }
      
      button {
        width: 120rpx;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 28rpx;
        color: white;
        background: $primary-color;
        border-radius: 30rpx;
        margin-left: 20rpx;
        
        &::after {
          border: none;
        }
      }
    }
  }
}
</style>